<template>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h2>{{ number }}</h2>
    <h2>{{ quanzhan }}</h2>
    <h2>df{{shuzu[0]}}</h2>
    <button @click="changInfo">修改</button>
</template>

<script>

import {ref, reactive} from "vue";

export default {
    name: 'App',
    /**
     * 基本数据类型依然是靠Object.defineProperty() 的get和set
     *  ref 里面写对象， 会执行reactive
     * 对象类型数据，用的reactive， 内部是ES6 proxy实现的
     */
    setup() {
        // 数据

        //返回的是RefImpl(reference implement)
        let name = ref("张三") // return：引用实现对象的实例
        let age = ref(18)
        let job = ref({
            type: "全栈123"
        })

        let number = ref(666)

        // 处理对象类型，返回是Proxy
        let quanzhan = reactive({
            type: "全栈"
        })

        let shuzu = reactive([1,2,3])

        // 方法
        function changInfo() {
            console.log(shuzu)
            /*console.log(name, age)
            name.value = "李四"
            age.value = 48
            job.value.type = "全栈1"*/
        }

        return {
            name, age, changInfo, number, quanzhan, shuzu
        }
    }
}
</script>

<style>

</style>
